<template>
    <div>
        <el-card>
            <!-- 顶部操作 -->
            <el-row :gutter="30">
                <el-col :span="6">
                    <el-input v-model="queryInfo.query" :clearable='true' @clear='getFilmList' placeholder="请输入内容">
                        <template #append>
                            <Search /> <el-button @click="search" :icon="Search"> </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button @click="filmDiaLogVisibleFnSwitch" type="primary">创建电影信息</el-button>
                </el-col>
                <el-col :span="4">
                    <el-select placeholder="请选择影片类型" v-model="AddForm.type">
                        <el-option @click="selectType(item.name)" v-for="item in filmtypes2" :label="item.name"
                            :value="item.name" :key="item.code">
                        </el-option>
                    </el-select>
                </el-col>

            </el-row>
            <!-- 添加新电影 -->
            <el-dialog title="创建电影" v-model="filmDialogVisible" width="60%" @close="filmDialogClose">
                <el-form ref="filmFormRef" :model="AddForm" label-width="80px">
                    <el-form-item label="电影海报">
                        <el-upload class="avatar-uploader" v-model="AddForm.movieposter" :before-upload="handleBeforeUpload"
                            :http-request="uploadEnter">
                            <img v-if="AddForm.movieposter" :src="AddForm.movieposter" class="avatar" />
                            <span v-if="!AddForm.movieposter" class="addplus">+</span>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="影片类型">
                        <el-select placeholder="请选择影片类型" v-model="AddForm.type">
                            <el-option v-for="item in filmtypes" :label="item.name" :value="item.name" :key="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="主演名单">
                        <el-input v-model="AddForm.actornames"></el-input>
                    </el-form-item>
                    <el-form-item label="电影简介">
                        <el-input v-model="AddForm.filmintroduction" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="电影名字">
                        <el-input v-model="AddForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电影类型">
                        <el-checkbox-group v-model="AddForm.movietypes" :max="3">
                            <el-checkbox v-for="item in movietypes2" :label="item.type" name="type">{{
                                item.type }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="电影评分">
                        <el-rate v-model="AddForm.rating" :max="10" allow-half />
                    </el-form-item>
                    <el-form-item label="上映时间">
                        <el-date-picker v-model="AddForm.releaseTime" type="date" placeholder="请输入上映日期"
                            format="YYYY/MM/DD" />
                    </el-form-item>
                    <el-form-item label="制片方">
                        <el-select placeholder="请选择国家类型" v-model="AddForm.producer">
                            <el-option v-for="item in producers" :label="item.area" :value="item.area" :key="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时长">
                        <el-input v-model="AddForm.duration"></el-input>
                    </el-form-item>
                </el-form>

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="filmDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="filmDialogEnter">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 电影列表 -->
            <el-table :data="FilmList" style="width: 100%">
                <el-table-column label="序号" type="index" width="80">
                </el-table-column>
                <el-table-column label="电影海报" prop="movieposter" width="100">
                    <template #default="scope">
                        <img class="img2" :src="scope.row.movieposter" alt="" />
                    </template>
                </el-table-column>
                <el-table-column label="电影名" prop="name" width="100"></el-table-column>
                <el-table-column label="演员" prop="actornames" width="100"></el-table-column>
                <el-table-column label="电影简介" prop="filmintroduction" width="130" :show-overflow-tooltip="true">

                </el-table-column>
                <el-table-column label="电影类型" prop="type" width="180"></el-table-column>
                <el-table-column label="影片类型" prop="movietypes" width="180"></el-table-column>
                <el-table-column label="电影评分" prop="rating" width="180"></el-table-column>
                <el-table-column label="上映时间" prop="releaseTime" width="180"></el-table-column>
                <el-table-column label="制片方" prop="producer" width="180"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button @click="ModifyFilm(scope.row)" type="danger">编辑</el-button>
                        <el-button @click="DeleteFilm(scope.row)" type="info">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="queryInfo.total">
            </el-pagination>
        </el-card>
        <!-- 修改模态框 -->
        <el-dialog title="创建电影" v-model="filmDialogVisible2" width="60%" @close="filmDialogClose">
            <el-form ref="filmFormRef" :model="updatelist" label-width="80px">
                <el-form-item label="电影海报">
                    <el-upload class="avatar-uploader" v-model="updatelist.movieposter" :before-upload="handleBeforeUpload"
                        :http-request="uploadEnter">
                        <img v-if="updatelist.movieposter" :src="updatelist.movieposter" class="avatar" />
                        <span v-if="!updatelist.movieposter" class="addplus">+</span>
                    </el-upload>
                </el-form-item>
                <el-form-item label="影片类型">
                    <el-select placeholder="请选择影片类型" v-model="updatelist.type">
                        <el-option v-for="item in filmtypes" :label="item.name" :value="item.name" :key="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主演名单">
                    <el-input v-model="updatelist.actornames"></el-input>
                </el-form-item>
                <el-form-item label="电影简介">
                    <el-input v-model="updatelist.filmintroduction" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="电影名字">
                    <el-input v-model="updatelist.name"></el-input>
                </el-form-item>
                <el-form-item label="电影类型">
                    <el-checkbox-group v-model="updatelist.movietypes" :max="3">
                        <el-checkbox v-for="item in movietypes2" :label="item.type" name="type">{{
                            item.type }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="电影评分">
                    <el-rate v-model="updatelist.rating" :max="10" allow-half />
                </el-form-item>
                <el-form-item label="上映时间">
                    <el-date-picker v-model="updatelist.releaseTime" type="date" placeholder="请确认上映时间"
                        format="YYYY/MM/DD" />
                </el-form-item>
                <el-form-item label="制片方">
                    <el-select placeholder="请选择国家类型" v-model="updatelist.producer">
                        <el-option v-for="item in producers" :label="item.area" :value="item.area" :key="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时长">
                    <el-input v-model="updatelist.duration"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="filmDialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="filmDialogUpdate">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { clientFn } from '../OSS/index'
import { addfilminfo, searchfilmname, delfilm, findfilminfo, updatefilminfo } from "@/api/sys";
import { ElNotification } from "element-plus";
import { Search } from "@element-plus/icons-vue"

const FilmList = ref([]); //运营需要管理的电影列表数据源

// search
const search = () => {
    if (queryInfo.value.query != "") {
        searchfilmname(queryInfo.value.query).then((res) => {
            FilmList.value = res.data;
            queryInfo.value.total = res.total
        });
    }

}

// 分页接口
const getFilmList = () => {
    findfilminfo(queryInfo.value).then((res) => {
        FilmList.value = res.list;
        queryInfo.value.total = res.total
    });
};

onMounted(() => {
    getFilmList(); //首次 调用 渲染电影列表
});

const AddForm = ref({
    movieposter: "",
    type: "",
    actornames: "",
    filmintroduction: "",
    name: "",
    movietypes: ['动作', '喜剧'],
    rating: 10,
    releaseTime: "",
    producer: "",
    duration: ""
});
// 分页
const queryInfo = ref({
    query: AddForm.value.name,
    pagenum: 1,
    pagesize: 5,
    total: 10,
    type: AddForm.value.type
})

const handleSizeChange = (e) => {
    queryInfo.value.pagesize = e
    getFilmList();
}
const handleCurrentChange = (e) => {
    queryInfo.value.pagenum = e
    getFilmList();
}
// 分页

// 模态框
const filmDialogVisible = ref(false);
const filmDiaLogVisibleFnSwitch = () => {
    filmDialogVisible.value = true;//让创造电影模态框 弹出来
};
const filmDialogClose = () => {  //dialog框关闭会自动触发
    console.log("取消");
    AddForm.value.movieposter = "";
    AddForm.value.type = "";
    AddForm.value.actornames = "";
    AddForm.value.filmintroduction = "";
    AddForm.value.name = "";

};

// 添加新电影
const filmDialogEnter = () => {

    let time1 = AddForm.value.releaseTime; //开始时间
    let datetime1 = time1.getFullYear() + '-' + time1.getMonth() + '-' + time1.getDate()
    let fulltime = datetime1
    AddForm.value.releaseTime = fulltime;

    addfilminfo(AddForm.value).then((res) => {
        console.log("res添加成功电影数据", res);
        getFilmList(); //添加后数据库信息发生变化 再次调用
        filmDialogVisible.value = false
        ElNotification({
            title: "Success",
            message: "添加电影信息成功",
            type: "success",
        });
        AddForm.value.movieposter = "";
        AddForm.value.type = "";
        AddForm.value.actornames = "";
        AddForm.value.filmintroduction = "";
        AddForm.value.producer = "";
        AddForm.value.releaseTime = "";
        AddForm.value.rating = "";
        AddForm.value.movietypes = [];
    });
};
// 影片类型
const movietypes2 = ref([
    { typename: "action", type: "动作", checked: false },
    { typename: "comedy", type: "喜剧", checked: false },
    { typename: "drama", type: "剧情", checked: false },
    { typename: "children", type: "儿童", checked: false },
    { typename: "young", type: "校园青春 ", checked: false },
    { typename: "romance", type: "爱情", checked: false },
    { typename: "science", type: "科幻", checked: false },
    { typename: "fantasy", type: "奇幻", checked: false },
    { typename: "horror", type: "恐怖", checked: false },
    { typename: "thriller", type: "惊悚", checked: false },
    { typename: "crime", type: "犯罪", checked: false },
    { typename: "historical", type: "历史", checked: false },
    { typename: "animation", type: "动画 ", checked: false },
    { typename: "musical", type: "音乐歌舞", checked: false },
])

const producers = ref([
    { code: "1", area: "欧美" },
    { code: "2", area: "中国" },
    { code: "3", area: "俄罗斯" },
    { code: "4", area: "法国" },
    { code: "5", area: "德国" },
    { code: "6", area: "印度" },
    { code: "7", area: "意大利" },
    { code: "8", area: "澳大利亚" },
    { code: "9", area: "南美" },
    { code: "10", area: "美国" },
])
const filmtypes = ref([
    {
        name: "正在热映",
        code: "001",
    },
    {
        name: "即将上映",
        code: "002",
    },
    {
        name: "影院下线",
        code: "003",
    },
]);
// 类型选择查找
const filmtypes2 = ref([
    {
        name: "正在热映",
        code: "001",
    },
    {
        name: "即将上映",
        code: "002",
    },
    {
        name: "影院下线",
        code: "003",
    },
    {
        name: "全部",
        code: "004",
    },
]);
const selectType = (type) => {
    queryInfo.value.type = type
    findfilminfo(queryInfo.value).then((res) => {
        FilmList.value = res.list;
        queryInfo.value.total = res.total
    });
}

const handleBeforeUpload = (file) => {
    //上传之前的校验函数
    const isJPEG = file.name.split(".")[1] === "jpeg";
    const isJPG = file.name.split(".")[1] === "jpg";
    const isPNG = file.name.split(".")[1] === "png";
    const isWEBP = file.name.split(".")[1] === "webp";
    const isGIF = file.name.split(".")[1] === "gif";
    const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
    if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
        alert('图片格式不对 ')
        return
    }
    if (!isLt500K) {
        alert('图片过大')
        return
    }
    return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
};
const uploadEnter = (file) => {
    //校验成功后开始上传 会走这个函数
    var fileName = 'abcimg/' + "banner" + `${Date.parse(new Date())}` + '.jpg'//文件名字
    clientFn()
        .multipartUpload(fileName, file.file, { // 1 文件名字  2 文件本身 3 进度条
            progress: function (percentage, cpt) {
                // console.log('进度图片上传', percentage)
            }
        }).then((res) => {
            // console.log('res上传成功')
            // console.log(res)
            AddForm.value.movieposter = 'https://rantoki.oss-cn-beijing.aliyuncs.com/' + fileName
        })
};
// 添加新电影

// 删除电影
const DeleteFilm = (row) => {
    console.log(row._id, "delete");
    delfilm(row._id).then((res) => {
        console.log("电影删除成功");
        if (res.info == "success") {
            getFilmList();
        }
    })
}

// 修改电影
const filmDialogVisible2 = ref(false);
const updatelist = ref({
    movieposter: "",
    type: "",
    actornames: "",
    filmintroduction: "",
    name: "",
    movietypes: [],
    rating: 10,
    releaseTime: "",
    producer: "",
    duration: ""
})

// 唤醒模态框
// 修改电影
const ModifyFilm = (row) => {
    filmDialogVisible2.value = true
    updatelist.value = row;
}

const filmDialogUpdate = () => {
    let time1 = updatelist.value.releaseTime; //开始时间
    let datetime1 = time1.getFullYear() + '-' + time1.getMonth() + '-' + time1.getDate()
    let fulltime = datetime1
    updatelist.value.releaseTime = fulltime;
    updatefilminfo(updatelist.value).then((res) => {
        getFilmList()
        ElNotification({
            title: "Success",
            message: "修改电影信息成功",
            type: "success",
        });
        filmDialogVisible2.value = false
    })
}


</script>
  
<style lang="scss" scoped>
.avatar-uploader {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    position: relative;
}

.addplus {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 100px;
    transform: translate(-50%, -50%);
}

.avatar {
    height: 200px;
}

.img2 {
    width: 80px;
}

// 影片类型框
.checkbox {
    margin: 3px;
}
</style>